import 'package:easy_video/controller/user/login_controller.dart';
import 'package:easy_video/widgets/auto_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class LoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      builder: (controller) {
        return Scaffold(
          appBar: AppBar(
            title: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "登录",
              ),
            ),
          ),
          body: Form(
            key: controller.formKey,
            child: Container(
              height: Get.height,
              width: Get.width,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      child: AutoImage.buildImage(
                        "assets/icon/app_icon.png",
                        width: 150,
                      ),
                      margin: EdgeInsets.only(
                        bottom: 80,
                        top: 80,
                      ),
                    ),
                    Container(
                      child: _input(
                        controller.mobileController,
                        "请输入手机号",
                        enableCaptchaWidget: true,
                        loginController: controller,
                        validator: (value) {
                          final String phonePattern = r'^(?:\+?86)?1[3-9]\d{9}$';
                          if (value == null || value.isEmpty) {
                            return '请输入手机号码';
                          }
                          // 使用正则表达式验证手机号码格式
                          RegExp regExp = RegExp(phonePattern);
                          if (!regExp.hasMatch(value)) {
                            return '请输入有效的手机号码';
                          }
                          return null;
                        },
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        top: 20,
                      ),
                      child: _input(
                        controller.captchaController,
                        "请输入验证码",
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        top: 20,
                      ),
                      child: SizedBox(
                        child: TextButton(
                          onPressed: () {
                            controller.login();
                          },
                          style: TextButton.styleFrom(
                            backgroundColor: Colors.red,
                            padding: EdgeInsets.all(15),
                          ),
                          child: Text(
                            "登录",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                        ),
                        width: Get.width,
                      ),
                    ),
                  ],
                ),
              ),
              padding: EdgeInsets.only(
                left: 20,
                right: 20,
              ),
            ),
          ),
        );
      },
      init: LoginController(),
    );
  }
}

class _input extends StatelessWidget {
  final TextEditingController controller;

  LoginController? loginController = null;

  final String hintText;

  bool enableCaptchaWidget = false;

  final FormFieldValidator? validator;

  _input(
    this.controller,
    this.hintText, {
    this.enableCaptchaWidget = false,
    this.loginController = null,
    this.validator = null,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      validator: this.validator,
      decoration: InputDecoration(
        suffixIcon: this.enableCaptchaWidget
            ? TextButton(
                onPressed: () {
                  this.loginController?.getCaptcha();
                },
                child: Text(
                  "获取验证码",
                ),
              )
            : null,
        fillColor: Colors.grey[100],
        filled: true,
        hintText: this.hintText,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide.none,
        ),
      ),
      controller: this.controller,
    );
  }
}
